<template>
  <ele-modal
    form
    :width="600"
    :model-value="modelValue"
    :title="title"
    @update:modelValue="updateModelValue"
  >
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        highlight-current-row
        v-model:selections="selections"
        border
        stripe
        row-key="id"
        row-click-checked
      />
    </ele-card>
  </ele-modal>
</template>

<script setup>
  import { ref, watch, computed } from 'vue';
  import { pageBillDetail } from '@/api/company';
  const emit = defineEmits(['done', 'update:modelValue']);

  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    data: Object
  });
  const title = ref('');
  /** 表格实例 */
  const tableRef = ref(null);

  /** 表格列配置 */
  const columns = computed(() => {
    const cols = [];

    cols.push(
      {
        width: 60,
        prop: 'times',
        label: '期数'
      },
      {
        minWidth: 120,
        prop: 'deadline',
        label: '到期时间'
      },
      {
        width: 120,
        prop: 'amount_total',
        label: '应还'
      },

      {
        width: 120,
        prop: 'repay_total',
        label: '已还'
      }
      // {
      //   label: '账单信息',
      //   children: [
      //     {
      //       width: 120,
      //       prop: 'amountTotal',
      //       label: '总金额'
      //     },

      //     {
      //       width: 120,
      //       prop: 'amount',
      //       label: '本金'
      //     },

      //     {
      //       width: 120,
      //       prop: 'interest',
      //       label: '利息'
      //     }
      //   ]
      // },

      // {
      //   label: '还款情况',
      //   children: [
      //     {
      //       width: 120,
      //       prop: 'repayTotal',
      //       label: '已还总额'
      //     },

      //     {
      //       width: 120,
      //       prop: 'repay_amount',
      //       label: '已还本金'
      //     },

      //     {
      //       width: 120,
      //       prop: 'repay_interest',
      //       label: '已还利息'
      //     }
      //   ]
      // }
    );

    return cols;
  });

  /** 表格选中数据 */

  /** 表格数据源 */

  const datasource = async ({ page, limit, where, orders }) => {
    const result = await pageBillDetail({
      ...where,
      ...orders,
      page,
      limit,
      bill_id: props.data.id
    });
    return result;
  };

  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };
  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        title.value =
          props.data.plate_number + '的' + props.data.cate + '账单详情';
      } else {
        console.log('关闭');
      }
    }
  );
</script>
